<template>
	<view class="fu-m-x-30 fu-p-y-40">
		<view class="fu-flex fu-flex-direction-column fu-flex-col-center fu-flex-row-center fu-b-r-30 fu-container fu-p-30">
			<view class="image">
				<image v-if="imageSrc" :src="imageSrc" mode="heightFix"></image>
			</view>
		</view>
		
		<view class="fu-m-t-60">
			<view class="">
				<view class="fu-flex fu-flex-column-center fu-flex-row-center fu-text-c">
					<view class="content-left-line"></view>
					<view class="content-text">笔画颜色</view>
					<view class="content-right-line"></view>
				</view>
				
				<view class="fu-container fu-flex fu-gap-30 fu-m-t-30 fu-p-30 fu-p-y-40">
					<fu-button width="100%" @click="colorChange(0)">默认</fu-button>
					<fu-button width="100%" type="warning" @click="colorChange(1)">自定义</fu-button>
				</view>
			</view>
			
			<view class="fu-m-t-40">
				<view class="fu-flex fu-flex-column-center fu-flex-row-center fu-text-c">
					<view class="content-left-line" style="background-image: repeating-linear-gradient(45deg, #E72F8C, #892FE8);"></view>
					<view class="content-text" style="background-image: repeating-linear-gradient(45deg, #E72F8C, #892FE8);">旋转签名</view>
					<view class="content-right-line" style="background-image: repeating-linear-gradient(45deg, #E72F8C, #892FE8);"></view>
				</view>
				
				<view class="fu-container fu-flex fu-gap-30 fu-m-t-30 fu-p-30 fu-p-y-40">
					<fu-button width="100%" type="success" @click="rotateChange(0)">不旋转</fu-button>
					<fu-button width="100%" type="error" @click="rotateChange(1)">旋转</fu-button>
				</view>
			</view>
		</view>
		
		<fu-sign-board :show="show" :customBarHeight="customBarHeight" :signSelectColor="signSelectColor" :rotate="rotate" @save="saveSign" @close="closeSign"></fu-sign-board>
	</view>
</template>

<script setup>
	import { reactive, ref, computed } from 'vue'
	
	// data数据
	let show = ref(false);
	let signSelectColor = reactive(['#080808', '#E83A30']);
	let rotate = ref(true);
	let imageSrc = ref('');
	let colorIndex = ref(0);
	let rotateIndex = ref(1);
	
	// computed计算属性
	const customBarHeight = computed(() => {
		// #ifndef H5
		return 0
		// #endif
		return uni.getSystemInfoSync().statusBarHeight + 44
	});
	
	// methods方法
	// 弹出SignBoard
	const showSignBoard = () => {
		show.value = true;
	};
	
	// 切换画笔颜色
	const colorChange = (e) => {
		colorIndex.value = e;
		switch (e) {
			case 0:
				signSelectColor.length = 0;
				Object.assign(signSelectColor, ['#080808', '#E83A30'])
				break
			case 1:
				signSelectColor.length = 0;
				Object.assign(signSelectColor, ['#838383', '#01BEFF'])
				break
		}
		showSignBoard()
	};
	
	// 切换旋转内容
	const rotateChange = (e) => {
		rotateIndex.value = e;
		rotate.value = e === 0 ? false : true;
		showSignBoard()
	};
				
	// 保存签名
	const saveSign = (e) => {
		imageSrc.value = e;
		show.value = false;
	};
	
	// 关闭签名板
	const closeSign = () => {
		show.value = false;
	};
</script>

<style lang="scss" scoped>
	.image {
	    height: 200rpx;
	    
		image {
			height: 200rpx;
		}
	}
	
	.fu-container {
		box-shadow: 0rpx 10rpx 50rpx 0rpx rgba(0, 3, 72, 0.1);
	}
	
	.content-left-line, .content-right-line {
		width: 52px;
		height: 1px;
		position: relative;
		background-image: repeating-linear-gradient(45deg, #E83A30, #E72F8C);
	}
	
	.content-left-line::after {
		content: '';
		background: inherit;
		width: 6px;
		height: 6px;
		position: absolute;
		top: -6px;
		right: 0px;
		border-radius: 50%;
		-webkit-transform: translateY(50%);
		transform: translateY(50%);
	}
	
	.content-right-line::after {
		content: '';
		background: inherit;
		width: 6px;
		height: 6px;
		position: absolute;
		top: -6px;
		left: 0px;
		border-radius: 50%;
		-webkit-transform: translateY(50%);
		transform: translateY(50%);
	}
	
	.content-text {
		-webkit-background-clip: text;
		color: transparent;
		min-width: 64px;
		height: 18px;
		font-size: 16px;
		line-height: 1;
		margin: 0 18px;
		background-image: repeating-linear-gradient(45deg, #E83A30, #E72F8C);
	}
</style>